<%--
  Created by IntelliJ IDEA.
  User: yangtao
  Date: 2017/6/27
  Time: 15:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="<%=path%>/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="<%=path%>/css/global.css">
    <script type="text/javascript" src="<%=path %>/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/core/helper.js"></script>
    <script src="<%=path%>/plugins/layui/layui.js"></script>
</head>
<body style="background: ghostwhite">
<form id="form" class="layui-form layui-form-pane" action="" style="padding: 10px;">
    <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
            <input name="sortName" id="sortName" lay-verify="sortName" placeholder="请输入分类名称"
                   autocomplete="off" class="layui-input" type="text">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">类型编码</label>
        <div class="layui-input-block">
            <input name="sortCode" id="sortCode" lay-verify="sortCode" placeholder="请输入类型编码"
                   autocomplete="off" class="layui-input" type="text">

        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input name="description" id="description" lay-verify="description" placeholder="请输入资源描述"
                   autocomplete="off" class="layui-input" type="text">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">自定义类容&nbsp;&rarr;&nbsp;
            <button type="button" onclick="customAddPerms()" class="layui-btn layui-btn-mini">添加一行</button>
        </label>
        <div id="perms" class="layui-input-block" style="background: #FFFFFF;padding: 20px">

        </div>
    </div>

    <div class="layui-form-item">
        <c:if test="${empty sortCode}">
            <button id="savebt" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submitSort">
                新增保存
            </button>
            <input type="hidden" id="saveType" name="saveType" value="add"/>
        </c:if>
        <c:if test="${not empty sortCode}">
            <button id="modifySavebt" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="modifySavebt">
                修改保存
            </button>
            <input type="hidden" id="saveType" name="saveType" value="modify"/>
        </c:if>
    </div>
</form>


<SCRIPT language="javascript">
    var form;
    layui.use(['layer', 'form'], function () {
        form = layui.form();
        var reg = /^[A-Za-z0-9]+$/;
        var regCode = /^[a-zA-Z_0-9]+$/;
        //自定义验证规则
        form.verify({
            sortName: function (value) {
                if (value.length < 2) {
                    return '分类名称至少得2个字符!';
                }
            },
            sortCode: function (value) {
                if (value.length < 1) {
                    return '分类编码至少得1个字符!';
                }
                if (!regCode.test(value)) {
                    return '分类编码只能是英文，数字，下划线组成！';
                }
            },
            displayNames: function (value) {
                if (value.length < 1) {
                    return '显示名不能为空!';
                }
            },
            sortValues: function (value) {
                if (value.length < 1) {
                    return '自定义属性不能为空!';
                }
                if (!reg.test(value)) {
                    return '对应值必须是英文或者数字！';
                }
            }
        });

        //添加提交
        form.on('submit(submitSort)', function (data) {

            var displayNames = $("input[name='displayNames']").map(function () {
                return $(this).val()
            }).get();
            var sortValues = $("input[name='sortValues']").map(function () {
                return $(this).val()
            }).get();
            var sortList = {};
            for (var i in displayNames) {
                sortList[sortValues[i]] = displayNames[i];
            }
            var perms = {};
            perms.customType = 'CMS_CUSTOM_SORT';
            perms.customKey = $("input[name='sortCode']").val();
            perms.sortName = $("input[name='sortName']").val();
            perms.description = $("input[name='description']").val();
            perms.spinnerMap = sortList;
            perms.saveType = 'add';
            parent.customAddPerms(perms, parent.customSortView);
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);

            return false;
        });
        //修改提交
        form.on('submit(modifySavebt)', function (data) {
            postJson("<%=path%>/cms/resource/saveResourceSort.x", $('#form').serialize(), function (data) {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });
            return false;
        });

        if (parent.customSorts && parent.customSorts.customType === 'CMS_CUSTOM_SORT') {
            if (parent.customSorts.sortName) {
                $('#sortName').val(parent.customSorts.sortName);
            } else {
                $('#sortName').val(parent.customSorts.customName);
            }
            $('#sortCode').val(parent.customSorts.customKey);
            $('#description').val(parent.customSorts.description);

            $('#perms').empty();
            var spinnerMap = parent.customSorts.spinnerMap;
            for (var key in spinnerMap) {
                customAddPerms(spinnerMap[key], key);
            }
        }
    });

    function customAddPerms(displayName, value) {
        if (displayName) {
            displayName = 'value =' + displayName;
        } else {
            displayName = '';
        }
        if (value) {
            value = 'value =' + value;
        } else {
            value = '';
        }
        $("#perms").append(
            '<div>' +
            '<div style="float:left;">' +
            '显示名：<div class="layui-inline">' +
            '<input name="displayNames" lay-verify="displayNames" placeholder="请输显示名"' + displayName +
            ' autocomplete="off" class="layui-input" type="text">' +
            '</div>' +
            '</div>' +
            '<div style="float:left;">' +
            '对应值：<div class="layui-inline">' +
            '<input name="sortValues" lay-verify="sortValues" placeholder="请输入对应值"' + value +
            ' autocomplete="off" class="layui-input" type="text">' +
            '</div>' +
            '</div>' +
            '<button type="button" class="permsRemove layui-btn layui-btn-danger" style="margin-right:20px">删&nbsp;除</button>' +
            '<hr>' +
            '</div>'
        );

        $("#perms p").remove();

        $(".permsRemove").click(function () {
            $(this).parent().remove();
        });
        form.render();
    }
</SCRIPT>
</body>
</html>
